<template>
  <div>
    <p>列表页</p>
    <p>动态路由的使用场景：结构相同，数据不同，大量重复</p>
    <ul>
      <li class="li" v-for="item in songList" :key="item.id">
        <router-link :to="'/detail/'+item.id">{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songList: [
        {id: 1, name: '单身情歌'},
        {id: 2, name: '只要你过得比我好'},
        {id: 3, name: '海底小纵队'},
        {id: 4, name: '汪汪队立大功'},
      ]
    }
  }
}
</script>

<style>
  .li {
    line-height: 300px;
  }
</style>